// Copyright (c) Microsoft. All rights reserved.

@import 'src/styles/themes';
@import 'src/styles/mixins';

.tooltip-container {
  position: relative;
  display: inline-block;
  @include rem-font-size(12px);
  @include rem-fallback(padding, 0px, 4px);

  &:hover .tooltip { visibility: visible; }

  .hyperlink { @include rem-font-size(12px); }

  .tooltip {
    visibility: hidden;
    z-index: 100;
    position: absolute;
    left: 50%;
    bottom: calc(100% + 8px);
    transform: translateX(-50%);
    padding: 1px; //No rem-fallback here so it matches the :before/:after border width
    @include rem-font-size(12px);
    @include rem-fallback(min-width, 200px);
    @include rem-fallback(max-width, 320px);

    &:hover { visibility: visible; }

    .tooltip-content {
      @include rem-fallback(padding, 12px);

      &:before,
      &:after {
        display: block;
        content: "";
        position: absolute;
        z-index: -100;
        width: 50%;
        top: 0;
        bottom: 0;
        box-shadow: 3px 3px 6px rgba(0, 0, 0, 0.25);
      }

      &:before {
        left: 0;
        @include rem-fallback(border-radius, 0px, 0px, 12px, 0px);
      }

      &:after{
        right: 0;
        @include rem-fallback(border-radius, 0px, 0px, 0px, 12px);
      }
    }

    .tooltip-arrow {
      top: auto;
      left: 50%;
      right: auto;
      position: absolute;
      z-index: -100;
      display: block;
      transform:
        translateX(-50%)
        rotate(45deg);
      @include rem-fallback(width, 12px);
      @include rem-fallback(height, 12px);
      @include rem-fallback(bottom, -6px);
    }
  }

  .tooltip.bottom {
    top: calc(100% + 8px);
    bottom: auto;

    .tooltip-content {
      &:before { @include rem-fallback(border-radius, 0px, 12px, 0px, 0px); }

      &:after { @include rem-fallback(border-radius, 12px, 0px, 0px, 0px); }
    }

    .tooltip-arrow {
      bottom: auto;
      left: 50%;
      right: auto;
      @include rem-fallback(top, -6px);
    }
  }

  @include themify($themes) {
    .tooltip {
      .tooltip-content {
        color: themed('colorTooltipText');
        background-color: themed('colorTooltipBackground');

        &:before,
        &:after {
          background-color: themed('colorTooltipBackground');
          border: 1px solid themed('colorTooltipBorder');
          box-shadow: 3px 3px 6px themed('colorTooltipDropShadow');
        }
      }

      .tooltip-arrow {
        background-color: themed('colorTooltipBackground');
        border: 1px solid themed('colorTooltipBorder');
        box-shadow: 0px 0px 6px themed('colorTooltipDropShadow');
      }
    }
  }
}
